<template>
	<view class="container">

		<up-navbar
		  :autoBack="true"
		  :placeholder="true"
		  bgColor="#fff"
		  title="个人信息"
		>
			<template #right>
				<view class="right-box" @click="submit">
					保存
				</view>
			</template>
		</up-navbar>
		<view class="bor">

		</view>
		<view class="content">


			<view class="list">

				<view class="item">
					<view class="title">
						头像
					</view>
					<view class="uni-input" style="display: flex;align-items: center;justify-content: center;">
						<image style="width: 73rpx;height: 73rpx;margin-right: 20rpx;" class="" :src="data.userInfo.head?data.userInfo.head:$defaultAvatar" mode="aspectFill" @click="$Uplode(uploadFileRes)"></image>
						<uni-icons type="right" size="20"></uni-icons>
					</view>
				</view>


				<view class="item">
					<view class="title">
						昵称
					</view>
					<input class="uni-input" v-model="data.userInfo.nickname" name="input" placeholder="请输入昵称" />
				</view>
				<view class="item">
					<view class="title">
						电话
					</view>
					<view class="uni-input">
						{{data.userInfo.mobile}}
					</view>
				</view>
				<view class="item" v-if="data.mobile">
					<view class="title">
						推荐人
					</view>
					<view class="uni-input" >
						{{data.mobile}}
					</view>
				</view>
        <view class="item" v-if="data.userInfo.is_transfer_subsidy_red==1">
          <view class="title">
            微信二维码
          </view>
          <view class="uni-input" style="display: flex;align-items: center;justify-content: center;">
            <image style="width: 73rpx;height: 73rpx;margin-right: 20rpx;" class="" :src="data.userInfo.wx_qrcode||''" mode="aspectFill" @click="$Uplode(uploadFileRes2)"></image>
            <uni-icons type="right" size="20"></uni-icons>
          </view>
        </view>
			</view>
		</view>

	</view>
</template>

<script setup>
		import {ref,reactive,getCurrentInstance} from "vue";
		import {onLoad,onShow} from "@dcloudio/uni-app";
		const {proxy} = getCurrentInstance();
		let data=reactive({
			userInfo:{},
			mobile:'',
			show:false
		})
		let userInfo =reactive({head:'',nickname:'',mobile:''})
		onLoad((option)=>{
			console.log('页面onLoad')
		})
		onShow(()=>{
			proxy.$userInfo({
				success(res){
					data.userInfo=res.data
					try{

						data.mobile=res.data.parentMobile
						if(res.data.parentMobile){
							data.show=false
						}else{
							data.show=true
						}
					}catch{

					}

				}
			})
		})
		function binding(){
			if (!(/^1[3456789]\d{9}$/).test(data.mobile)) {
				uni.showToast({
					icon: 'none',
					position: 'bottom',
					title: '手机号不正确'
				});
				return false;
			}
			proxy.$request({
				url: `api/binding/`,
				method: 'post',
				data:{mobile:data.mobile} ,
				success(res) {
					uni.showToast({
						icon:'none',
						title:res.errmsg
					})
					setTimeout(()=>{
						uni.switchTab({
							url:'/pages/personal/index'
						})
					},1000)
					// data.userInfo=res.data
					// uni.setStorageSync('userInfo',res.data)
				}
			})
		}
		function uploadFileRes(num){
			console.log(num,'num',userInfo)
			data.userInfo.head=num
		}
    function uploadFileRes2(num){
			console.log(num,'num',userInfo)
			data.userInfo.wx_qrcode=num
		}
		function submit(){
			proxy.$request({
				url: `api/user_info/`,
				method: 'post',
				data:data.userInfo ,
				success(res) {
					uni.showToast({
						icon:'none',
						title:res.errmsg
					})
					setTimeout(()=>{
						uni.switchTab({
							url:'/pages/personal/index'
						})
					},1000)
					data.userInfo=res.data
					uni.setStorageSync('userInfo',res.data)
				}
			})
		}
</script>
<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
.container{
	.content{
		padding: 20upx;
		.list {
			padding: 20upx;
			.item {
				font-weight: 400;
				font-size: 28rpx;
				color: #2D2D2D;
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 96rpx;
				border-bottom: 1rpx solid #ddd;
				.title {
					font-size: 28upx;
					width: 100upx;
				}
				.uni-input{

					display: flex;
					justify-content: space-between;
					text-align: right;
					view{
						font-size: 14px;
					}
				}
			}
		}
		.header{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			image{
				width: 30vw;
				height: 30vw;
				border-radius: 50%;
			}
		}
	}
}
.right-box{
	width: 96rpx;
	height: 48rpx;
	background: #F63B29;
	border-radius: 12rpx;
	font-weight: 500;
	font-size: 26rpx;
	color: #FFFFFF;
	text-align: center;
	line-height: 48rpx;
}
.bor{
	height: 10rpx;
	background: #FFFFFF;
	box-shadow: 0px 8rpx 20rpx 0px #F6F6F6;
}
</style>
